<template>
	<div class="Cregister">
		<div class="Jregister_logo flex align_center justify_cen">
			<img src="../../../../static/img/images/logo2.jpg" />
		</div>
		<div class="Jregister_body">
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">&nbsp;&nbsp;姓名</div>
				<input type="text" class="flex1" v-model="message.name" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">手机号</div>
				<input type="number" class="flex1" v-model="message.mobile" />
			</div>
			<div class="Jregister_body_input flex align_center">
				<div class="Jregister_body_name">验证码</div>
				<input type="number" class="flex1" v-model="message.sms_code" />
				<v-Code :phoneNew='message.mobile'></v-Code>
			</div>
			
			<div class="Jregister_body_pic clear2">
				<p class="Jregister_body_areaTitle">
					实名认证
				</p>
				<div class="Jregister_body_picUpload">
					<el-upload
					  class="avatar-uploader"
					  :action="defines.upload_img"
					  :show-file-list="false"
					  name='userfile'
					  :on-success="handleAvatarSuccess1"
					>
					  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
					  <div class="Jregister_body_picPlus" v-else>
					  	<div class="Jregister_body_picI">
					  		<i  class="el-icon-plus avatar-uploader-icon"></i>
					  	</div>
					  	<p class="Jregister_body_picP">添加身份证正面</p>
					  </div>
					</el-upload>
				</div>
				<div class="Jregister_body_picUpload">
					<el-upload
					  class="avatar-uploader"
					  :action="defines.upload_img"
					  :show-file-list="false"
					  name='userfile'
					  :on-success="handleAvatarSuccess2"
					>
					  <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
					  <div class="Jregister_body_picPlus" v-else>
					  	<div class="Jregister_body_picI">
					  		<i  class="el-icon-plus avatar-uploader-icon"></i>
					  	</div>
					  	<p class="Jregister_body_picP">添加身份证反面</p>
					  </div>
					</el-upload>
				</div>
			</div>
			
			
		</div>
		<div class="liang-top">
			<p class="liang-topTitle">
				<span @click="radioI=1" :class="radioI==1?'liang-topName':'liang-topSub'">事业匠管</span>
				<span @click="radioI=2" :class="radioI==2?'liang-topName':'liang-topSub'">共享匠管</span>
			</p>
		</div>
		
		<div class="Jregister_body" v-if='radioI==1'>
			<div class="Jregister_bodyNcontent clear2">
				<span class="Jregister_bodyNspan1">获取资格授权</span>
				<span class="Jregister_bodyNspan2">{{systemList.tube_reg_parame.career_reg_price}}万</span>
			</div>
			<div class="Jregister_bodyNcontent clear2">
				<span class="Jregister_bodyNspan1" style="float: none;display: block;">授权资格说明</span>
				<p class="Jregister_bodyNsm">
					1、事业级匠管授权成功后，成为自建商圈管理人员
				</p>
				<p class="Jregister_bodyNsm">
					2、分润指数为所辖同城商户入驻费60%、匠子充值1.5%
				</p>
				<p class="Jregister_bodyNsm">
					3、分享推荐事业匠管，奖励其全额资格授权费用
				</p>
				<p class="Jregister_bodyNsm">
					4、获得主题名店门头宣传和专题活动免费使用权
				</p>
				<p class="Jregister_bodyNsm">
					5、获得业务发展匠探团队建设30个免费名额
				</p>
				<p class="Jregister_bodyNsm">
					6、事业级匠管可升级为共享级匠管，升级后享受共享级权益
				</p>
				
			</div>
			
		</div>
		
		
		<div class="Jregister_body" v-else>
			<div class="Jregister_bodyNcontent clear2">
				<span class="Jregister_bodyNspan1">获取资格授权</span>
				<span class="Jregister_bodyNspan2">{{systemList.tube_reg_parame.shared_reg_price}}万</span>
			</div>
			<div class="Jregister_bodyNcontent clear2">
				<span class="Jregister_bodyNspan1">授权区域选择</span>
				<el-select v-model="city" placeholder="市" @change='cityC' class='Jregister_body_areaSelect' >
				    <el-option
				      v-for="item in options2"
				      :key="item.area_name"
				      :label="item.area_name"
				      :value="item">
				    </el-option>
				</el-select>
				<el-select v-model="province" placeholder="省" @change='provinceC' class='Jregister_body_areaSelect' style='margin: 0 2%;'>
				    <el-option
				      v-for="item in options1"
				      :key="item.area_name"
				      :label="item.area_name"
				      :value="item">
				    </el-option>
				</el-select>
				
			</div>
			<div class="Jregister_bodyNcontent clear2">
				<div class="clear2 Jregister_bodyNleft">
					<span class="Jregister_bodyNspan1" style="float: none;">汇款认证信息</span>
					<p class="Jregister_bodyNp1">杭州匠屋电子商务有限公司</p>
					<p class="Jregister_bodyNp2">1139787711@qq.com</p>
					<p class="Jregister_bodyNp3">(支付宝)</p>
					<button class="Jregister_bodyNp4" data-clipboard-text="1139787711@qq.com" @click="fuzhi">复制账号</button>
				</div>
				<div class="clear2 Jregister_bodyNright">
					<div class="Jregister_body_pic2">
						<div class="Jregister_body_picUpload">
							<el-upload
							  class="avatar-uploader"
							  :action="defines.upload_img"
							  :show-file-list="false"
							  name='userfile'
							  :on-success="handleAvatarSuccess3"
							>
							  <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
							  <div class="Jregister_body_picPlus" v-else>
							  	<div class="Jregister_body_picI">
							  		<i  class="iconfont icon-shangchuan"></i>
							  	</div>
							  	<p class="Jregister_body_picP">添加汇款凭证照片</p>
							  </div>
							</el-upload>
						</div>
					</div>
				</div>
			</div>
			<div class="Jregister_bodyNcontent clear2">
				<span class="Jregister_bodyNspan1" style="float: none;display: block;">授权资格说明</span>
				<p class="Jregister_bodyNsm">
					1、共享级匠管授权成功后，成为所选区域大商圈管理人员
				</p>
				<p class="Jregister_bodyNsm">
					2、分润指数为所辖区域商户匠子充值5%、商户入驻费用30%
				</p>
				<p class="Jregister_bodyNsm">
					3、分享推荐共享级匠管，奖励其授权资格费用的50%
				</p>
				<p class="Jregister_bodyNsm">
					4、获得主题名店门头宣传和专题活动免费使用权
				</p>
				<p class="Jregister_bodyNsm">
					5、获得业务发展匠探团队建设30个免费名额
				</p>
				<p class="Jregister_bodyNsm">
					6、享受事业级匠管所有权益
				</p>
				
			</div>
		</div>
		<el-button round class='Jregister_body_button' @click='jump'>获取资格授权</el-button>
		<div style="width: 100%;height: 1rem;"></div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import vCode from '../../common/yzm.vue';
	import Clipboard from 'clipboard';
	export default {
		components:{
            vCode
        },
		data: function() {
			return {
				message:{
					'name':'',
					'mobile':'',
					'sms_code':'',
					'id_card_up':'',
					'id_card_down':'',
					'cate_id':'',
					'remittance_voucher':''
				},
				province:'',
				city:'',
				options1:[],
				options2:[],
				imageUrl1: '',
				imageUrl2:'',
				imageUrl3:'',
				radioI:1,
			}
		},
		mounted() {
			this.get_city_level(1,1);
			
			
		},
		methods: {
			fuzhi(){
				var clipboard = new Clipboard('.Jregister_bodyNp4')  
		        clipboard.on('success', e => {  
		          console.log('复制成功')  
		          // 释放内存  
		          clipboard.destroy()  
		        })  
		        clipboard.on('error', e => {  
		          // 不支持复制  
		          console.log('该浏览器不支持自动复制')  
		          // 释放内存  
		          clipboard.destroy()  
		        })  
			},
			get_city_level(type,id){
				this.ajax(this, {
						'url': this.defines.get_city_level,
						'type': 'post',
						'data':{
							'city_id':id
						},
						'callback': data => {
							if(data.data.error_code==0) {
								if(type==1){
									this.options1=data.data.citys
								}
								else{
									this.options2=data.data.citys;
								}
	
							} else {
								Toast(data.data.error_msg)
							}
	
						},
						'errorback': errory => {
	
						},
	
					})
			},
			jump(){
				this.message.id_card_up=this.imageUrl1;
				this.message.id_card_down=this.imageUrl2;
				this.message.remittance_voucher=this.imageUrl3;
				this.message.cate_id=this.radioI;
				this.message.member_id=window.uid;
				for(let i in this.message){
					if(this.message[i]==''){
						Toast('请先填写数据')
						return false;
					}
				}
				if(this.radioI==1){
					if(this.message.province_id&&this.message.city_id&&this.message.province_id!=''&&this.message.city_id!=''){
						
					}
					else{
						Toast('请先填写数据')
						return false;
					}
				}
				this.ajax(this, {
						'url': this.defines.reg,
						'type': 'post',
						'data':this.message,
						'callback': data => {
							if(data.data.error_code==0) {
								Toast('注册提交成')
								window.history.go(-1);
	
							} else {
								Toast(data.data.error_msg)
							}
	
						},
						'errorback': errory => {
	
						},
	
					})
//				this.$router.push({
//      			path: '/Jreturn',
//				})
			},
			
			handleAvatarSuccess1(res, file) {
		        this.imageUrl1 = file.response.image;
		        Toast(res.error_msg)
		    },
		    handleAvatarSuccess2(res, file) {
		        this.imageUrl2 = file.response.image;
		        console.log(file)
		        Toast(res.error_msg)
		    },
		    handleAvatarSuccess3(res, file) {
		        this.imageUrl3 = file.response.image;
		        Toast(res.error_msg)
		    },
		    provinceC(){
		    	this.options2=[];
		    	this.city='';
		    	this.message.city_id='';
				this.get_city_level(2,this.province.id)
				this.message.province_id=this.province.id;
				this.province=this.province.area_name;
				
			},
			cityC(){
				this.message.city_id=this.city.id
				this.city=this.city.area_name;
				
			},
		    
		}
	}
</script>

<style scoped>
	.Jregister_logo{
		height: 20rem;
		width: 100%;
		background: #000000;
	}
	.Jregister_logo img{
		width: 50%;
		display: block;
	}
	.Jregister_body{
		width: 94%;
		margin: 2rem auto;
		
	}
	.Jregister_body_input{
		height: 3rem;
		width: 100%;
		margin-bottom: 2rem;
	}
	.Jregister_body_name{
		font-size: 1.6rem;
		margin-right: 1.6rem;
	}
	.Jregister_body_input input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #fff;
		border: 1px solid #e6e6e6;
		box-sizing: border-box;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.Jregister_body_code{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
	.Jregister_body_area{
		width: 100%;
		
	}
	.Jregister_body_areaTitle{
		margin: 2rem 0;
		font-size: 1.6rem;
		color: #000;
		text-align: center;
	}
	.Jregister_body_areaSelect{
		width: 32%;
		float: left;
		border-radius: 0.4rem;
		overflow: hidden;
		float: right;
		
	}
	
	.Jregister_body_button{
		width: 50%;
		background: #000;
		color: #f7bd40;
		font-size: 1.6rem;
		margin: 0 auto;
		display: block;
	}
	.register_radio{
		width: 94%;
    	margin: 2rem auto;
	}
	.register_radio_div{
		width: 100%;
		margin-top: 2rem;
	}
	.register_radio_divS{
		display: inline-block;
		width: 0.6rem;
		height: 0.6rem;
		border: 0.5rem solid #000;
		background: #fff;
		margin: 0.7rem 0;
		margin-right: 0.5rem;
		border-radius:2rem ;
	}
	
	.register_radio_active .register_radio_divS{
		background: #f7bd40;
	}
	.register_radio_div2{
		border: 1px dashed #000000;
		padding: 1rem 0;
	}
	.register_radio_p1{
		font-size: 1.6rem;
		font-family: "微软雅黑";
		
	}
	.register_radio_p1 img{
		height: 1.6rem;
		margin:  0 0.8rem;
	}
	.Jregister_body_pic2{
		width: 100%;
		margin: 0.5rem auto 0 auto;
		text-align: center;
	}
	.avatar{
		width: 100%;
		height: 10rem;
		object-fit: contain;
		
	}
	.Jregister_bodyNcontent{
		margin-bottom: 1rem;
		width: 100%;
		
		
	}
	.Jregister_bodyNspan1{
		color: #000;
		font-size: 1.4rem;
		float: left;
		height: 2.5rem;
		display: inline-block;
		line-height: 2.5rem;
	}
	.Jregister_bodyNspan2{
		color: #000;
		font-size: 1.3rem;
		float: right;
		height: 2.5rem;
		display: inline-block;
		line-height: 2.5rem;
	}
	.Jregister_bodyNleft{
		width: 50%;
		float: left;
	}
	.Jregister_bodyNright{
		width: 50%;
		float: left;
	}
	.Jregister_bodyNright{
		width: 50%;
		float: left;
	}
	.Jregister_bodyNp1{
		font-size: 1.2rem;
		font-family: "微软雅黑";
		margin-top: 1rem;
		display: flex;
		align-items: center;
	}
	.Jregister_bodyNp2{
		font-size: 1.2rem;
		font-family: "微软雅黑";
		height: 1.5rem;
		display: flex;
		align-items: center;
	}
	.Jregister_bodyNp3{
		font-size: 1.2rem;
		height: 2rem;
		display: flex;
		color: #999;
		align-items: center;
	}
	.Jregister_bodyNp4{
	    height: 2rem;
	    font-size: 1rem;
	    padding: 0 0.5rem;
	    background: #000;
	    color: #f7bd40;
	    display: inline-block;
	    line-height: 2rem;
	    border-radius: 0.4rem;
	}
	.liang-top{
		text-align: center;
    	margin: 1rem 0;
	}
	.liang-topTitle{
		display: inline-block;
		border: 1px solid #000000;
		overflow: hidden;
		height: 2rem;
		box-sizing: border-box;
		border-radius: 0.4rem;
	}
	.liang-topName{
		padding: 0 0.5rem;
		height: 1.9rem;
		line-height: 1.9rem;
		font-size: 1.3rem;
		display: inline-block;
		text-align: center;
		color: #f7bd40;
		background: #000;
	}
	.liang-topSub{
		padding: 0 0.5rem;
		height: 1.9rem;
		display: inline-block;
		line-height: 1.9rem;
		font-size: 1.3rem;
		text-align: center;
		
		
	}
	.Jregister_bodyNsm{
		font-size: 1.2rem;
		line-height: 2rem;
	}
</style>
<style>
	.Cregister .Jregister_body_areaSelect .el-input__inner{
		height: 2.5rem;
		line-height: 2.5rem;
		border:0.1rem solid #000000 !important;
		box-sizing: border-box;
		border-radius: 0.4rem;
		font-size: 1.2rem;
	}
	.Cregister .Jregister_body_areaSelect .el-input__suffix{
		right: 0;
		background: #000;
		
	}
	.Cregister .Jregister_body_areaSelect .el-input__suffix i{
		color: #f7bd40 !important;
	}
	.Cregister .Jregister_body_areaSelect .el-icon-arrow-up:before{
		content:"\E60C"
	}
	.Cregister .Jregister_body_pic .Jregister_body_picUpload .avatar-uploader .el-upload {
	    border: 1px dashed #000;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	    width: 47%;
	    float: left;
	    margin: 0 auto;
	    display: block;
	}
	.Cregister .Jregister_body_pic .Jregister_body_picUpload:nth-child(3) .avatar-uploader .el-upload{
		float: right;
	}
	 .Cregister .Jregister_body_pic .Jregister_body_picPlus{
		text-align: center;
		padding: 2.2rem 0;
		height: 10rem;
		box-sizing:border-box;
	}
	.Cregister .Jregister_body_pic .Jregister_body_picI{
		background: #000;
		width: 4rem;
		height: 4rem;
		border-radius: 0.4rem;
		margin: 0 auto;
	}
	.Cregister .Jregister_body_pic .Jregister_body_picI i{
		font-size: 2.5rem;
		font-weight: bold;
		line-height: 4rem;
		color: #f7bd40;
	}
	.Cregister .Jregister_body_pic .Jregister_body_picP{
		color: #666666;
		font-size: 1rem;
		margin-top: 1rem;
	}
	.Cregister .Jregister_body_accounts1{
		font-size: 1.3rem;
		text-align: center;
		line-height: 2rem;
	}
	.Cregister .Jregister_body_accounts1 span{
		color: #999999;
	}
	.Cregister .Jregister_body_accounts2{
		font-size: 1.3rem;
		text-align: center;
		line-height: 1.5rem;
	}
	.Cregister .Jregister_body_accounts2 span{
		display: inline-block;
		height: 1.5rem;
		padding: 0 0.5rem;
		background: #000;
		color: #f7bd40;
		border-radius: 0.4rem;
		margin-left: 1rem;
	}
	
	
	
	.Cregister .Jregister_body_pic2 .Jregister_body_picUpload .avatar-uploader .el-upload {
	    border: 1px solid #000;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	    width: 100%;
	    margin: 0 auto;
	    display: block;
	}
	.Cregister .Jregister_body_pic2 .Jregister_body_picPlus{
		text-align: center;
		padding: 1rem 0;
	}
	.Cregister .Jregister_body_pic2 .Jregister_body_picI{
		width: 5rem;
		height: 5rem;
		border-radius: 0.5rem;
		margin: 0 auto;
	}
	.Cregister .Jregister_body_pic2 .Jregister_body_picI i{
		font-size: 3rem;
		line-height: 5rem;
		color: #000;
	}
	.Cregister .Jregister_body_pic2 .Jregister_body_picP{
		margin-top: 0.5rem;
		font-size: 1.2rem;
		color: #999;
	}
</style>